<template>
<div>
  <div >

    <el-row :gutter="10" style="margin-bottom: 50px">
      <el-col :span="6">
        <!--        <el-card style="color: #F56C6C;width: 300px;margin-left: auto">-->
        <!--          <i class="el-icon-reading"></i>-->
        <!--          <span> CouchDB数据库：</span>-->
        <!--          <span style="padding: 10px 0;text-align: center;font-weight: bold">-->
        <!--                  <a target="_blank" href="http://116.205.135.189:5984/_utils" style='color: #F56C6C'>查看详情</a>-->
        <!--                </span>-->
        <!--        </el-card>-->
      </el-col>
      <el-col :span="11">
        <el-card style="color: burlywood;width: 300px;margin-left: auto;">
          <i class="el-icon-user-solid"></i>
          <span> 用户总数：</span>
          <span style="padding: 10px 0;text-align: center;font-weight: bold">
            {{userCount}} 个
          </span>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #67C23A;width: 300px;margin-left: auto">
          <i class="el-icon-money"></i>
          <span> 证书总数：</span>
          <span style="padding: 10px 0;text-align: center;font-weight: bold">
                  {{ certificateCount }} 个
                </span>
        </el-card>
      </el-col>
      <el-col :span="6">
<!--        <el-card style="color: #26B9F3;width: 300px;margin-left: auto">-->
<!--          <i class="el-icon-set-up"></i>-->
<!--          <span> 网络详情：</span>-->
<!--          <span style="padding: 10px 0;text-align: center;font-weight: bold">-->
<!--                  <a target="_blank" href="http://116.205.135.189:8080" style='color: #26B9F3'>查看详情</a>-->
<!--                </span>-->
<!--        </el-card>-->
      </el-col>

    </el-row>
  </div>


<!--  统计图-->
  <el-row>
    <el-col :span="24">
      <div id="main" style="width: 100%;height: 400px"></div>
    </el-col>
<!--    <el-col :span="12">-->
<!--      <div id="pie" style="width: 500px;height: 400px"></div>-->
<!--    </el-col>-->
  </el-row>



</div>
</template>

<script>
import * as echarts from  'echarts'

export default {
  name: "Home",
  data(){
    return{
      userCount:0,
      certificateCount:0,
      year:new Date().getFullYear(),
      month:(new Date().getMonth())+1
    }
  },
  mounted() { // 页面元素(如<div>等元素)渲染之后再触发
    //获取用户总数
    this.request.get("/echarts/user/count").then(res=>{
      this.userCount=res.data;
    })
    //获取证书总数
    this.request.get("/echarts/certificate/count").then(res=>{
      this.certificateCount=res.data;
    })

    //折线图
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option= {
      title:{ //标题
        text:"用户和证书数据统计图",
        subtext: this.year+"年每月新增用户和证书的数量",
        left:'center'
      },
      legend: { //图例
        orient: 'vertical',
        left: 'left'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap:false,
        data: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]//.splice(0,this.month)
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name:"用户",
          data: [],
          type: 'line'
        },
        {
          name:"证书",
          data: [],
          type: 'line'
        }
      ]
    };

    this.request.get("/echarts/user/yAxisData").then(res=>{
      // 折线图填数据

      option.series[0].data=res.data.splice(0,this.month) // option.series[0].data=[1,2,2,2,2,2,2,2,2,2,2,2]
      console.log(option.series[0].data)
      myChart.setOption(option);
    })
    this.request.get("/echarts/certificate/yAxisData").then(res=>{

      option.series[1].data=res.data.splice(0,this.month)
      console.log(option.series[1].data)
      myChart.setOption(option);
    })
  }
}
</script>

<style scoped>

</style>